$(function(){
	//用户名输入框
	var $usernameBox = $('#username');
	//密码输入框 
	var $passwordBox = $('#password');
	//验证码输入框
	var $codeBox = $('#code');
	//判断是否成功
	var userFlag = {flag:false};
	var pwdFlag = {flag:false};
	var codeFlag = false;
	
	
	//当验证码获得焦点时显示验证码
	$('#code').popover({
			placement:'right',
			trigger:'focus',
			html:true
	})
	//当双击验证输入窗口的时更换验证码
	$('#code').dblclick(function(){
		//生成一个随机码
		var random = parseInt(Math.random()*10000);
		//获得验证码的地址
		var codeElement = $(_CODE);
		var newSrc = codeElement.attr('src') + '/' + random;
		//再将地址赋值回去
		codeElement.attr('src',newSrc);
		$(this).attr('data-content',codeElement[0].outerHTML);
		$(this).trigger('blur');
		$(this).focus();
		$(this).popover('show');
	});
	//每个表单元素失去触发的方法  用于处理切换输入框 状态
	function isBlurOk(e){
		if($(this).val()==''){
			$(this).parents('.form-group').removeClass('has-success').addClass('has-error');
			$(this).next().removeClass('glyphicon-ok').addClass('glyphicon-remove').show();
			e.data.flag = false;
		}else{
			$(this).parents('.form-group').removeClass('has-error').addClass('has-success');
			$(this).next().removeClass('glyphicon-remove').addClass('glyphicon-ok').show();
			e.data.flag = true;
		}
	}
	
	//判断验证码是否输入正确 
	function isCodeOk(){
		
		if($(this).val()==''){
			$(this).parents('.form-group').removeClass('has-success').addClass('has-error');
			$(this).siblings('.iconFont').removeClass('glyphicon-ok').addClass('glyphicon-remove').show();
			codeFlag = false;
		}else{
			var $isThis = $(this);
			var code = $(this).val(); //当前输入的验证码
			$.ajax({
				url:_CODEURL,
				data:{code:code},
				type:'post',
				dataType:'json',
				success:function(phpData){
					if(phpData.status){
						$isThis.parents('.form-group').removeClass('has-error').addClass('has-success');
						$isThis.siblings('.iconFont').removeClass('glyphicon-remove').addClass('glyphicon-ok').show();
						codeFlag = true;
					}else{
						$isThis.parents('.form-group').removeClass('has-success').addClass('has-error');
						$isThis.siblings('.iconFont').removeClass('glyphicon-ok').addClass('glyphicon-remove').show();
						codeFlag = false;
					}
					
				}
			});
			
		}
	}
	
	//当帐号框失去焦点进  切换不同的状态
	$usernameBox.blur(userFlag,isBlurOk);
	$passwordBox.blur(pwdFlag,isBlurOk);
	$codeBox.blur(isCodeOk);
	
	//防止 刷新无法检测到已经输入的输入名
	if($usernameBox.val()){
		$usernameBox.trigger('blur');	
	}
	if($passwordBox.val()){
		$passwordBox.trigger('blur');	
	}
	//禁止回车提交 
	$(document).keydown(function(e){
		if(e.keyCode==13){
			e.preventDefault();	
		}
	})
	//当按下重置按钮时
	$('input[type=reset]').click(function(){
		//重置用户名框
		$usernameBox.parents('.form-group').removeClass('has-error has-success')
		$usernameBox.siblings('.iconFont').removeClass('glyphicon-remove glyphicon-ok').hide();
		//重置密码框
		$passwordBox.parents('.form-group').removeClass('has-error has-success')
		$passwordBox.siblings('.iconFont').removeClass('glyphicon-remove glyphicon-ok').hide();
		//重置验证码框
		$codeBox.parents('.form-group').removeClass('has-error has-success')
		$codeBox.siblings('.iconFont').removeClass('glyphicon-remove glyphicon-ok').hide();
		
	})
	//当表单提交时检测用户名或密码是否输入正确 
	$('.formbox').submit(function(){
		$codeBox.trigger('blur');
		var str = '';
		    str += '<div class="alert alert-danger alert-dismissible" role="alert">';
  			str +='<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
  		 	str +='<strong>错误!</strong>';
		//判断标记位是否为false为false就不提交 
		if(!userFlag.flag){
			str += '请输入用户名</div>';
			$('#errorMsgBox').html(str);
			return false;
		}else if(!pwdFlag.flag){
			str +='请输入密码</div>';
			$('#errorMsgBox').html(str);
			return false;
		}else if(!codeFlag){
			str +='验证码输入有误</div>';
			$('#errorMsgBox').html(str);
			return false;
		}
			
		
	});
	
	
})
